<template>
  <el-row class="tag-page">
    <!-- 左侧 -->
    <el-col :span="5">
      &nbsp;
    </el-col>
    <!-- 中间 -->
    <el-col :span="14">
      <!-- 所有标签排行 -->
      <el-card shadow="hover" class="t-l-list">
        <el-skeleton :loading="dataLoad" :rows="3" :throttle="200" animated>
          <template>

            <span v-for="(tag, index) in tagList" :key="tag.tagId" class="t-l-item"
                  :class="{ 'active' : tagIndex === index}"
                  @click="tagChangeHandle(index)">
              {{ tag.tagName }}&nbsp;&nbsp;&nbsp;{{ tag.num }}
            </span>
            <div v-if="tagList.length === 0" class="zero-tag">
              博客关联的标签列表为空
            </div>

          </template>
        </el-skeleton>
      </el-card>

      <!-- 博客展示列表 -->
      <div class="t-c-list">
        <!-- 列表头 -->
        <div class="t-c-header">
          <div class="t-c-h-left">
            <span class="title">
              文章列表
            </span>
          </div>

          <div class="t-c-h-right">
            <transition name="el-fade-in-linear">
              <span v-show="!searchBlogVisible" class="t-c-h-search-word">
                {{ searchFrom.word }}
              </span>
            </transition>

            <span class="sort-type t-c-h-search">
              <el-tooltip effect="light" :content="searchBlogTitle" placement="top">
                <svg-icon @click="searchButtonClickHandle" icon-class="search"
                          :class="searchBlogVisible ? 'active' : '' " class="fz16" />
              </el-tooltip>
            </span>
            <span @click="blogSortHandle(0)" class="sort-type"
                  :class="{ 'active': blogSortIndex === 0, 'load': dataLoad || blogList.length === 0 }">
              最新
            </span>
            <span @click="blogSortHandle(1)" class="sort-type"
                  :class="{ 'active': blogSortIndex === 1, 'load': dataLoad || blogList.length === 0 }">
              浏览最多
            </span>
            <span @click="blogSortHandle(2)" class="sort-type"
                  :class="{ 'active': blogSortIndex === 2, 'load': dataLoad || blogList.length === 0 }">
              点赞最多
            </span>
          </div>
        </div>
        <!-- 列表内容 -->
        <div class="t-c-content">

          <el-skeleton :loading="dataLoad" :rows="13" :throttle="200" animated>
            <template>

              <el-card shadow="hover" v-for="blog in blogList" :key="blog.blogId" @click.native="toBlogDetailHandle(blog.blogId)" class="blog">
                <el-row>
                  <!-- 博客图片 -->
                  <el-col :span="7" class="b-image">
                    <!--图片-->
                    <el-image fit="fill" lazy :src="blog.firstPicture" class="image">
                      <div slot="placeholder">
                        加载中...
                      </div>
                    </el-image>
                  </el-col>
                  <!-- 相关内容 -->
                  <el-col :span="17" class="b-content">
                    <div class="b-c-title">
                      <span class="title">{{ blog.title }}</span>
                    </div>
                    <div class="b-c-author">
                      <svg-icon icon-class="user2" class="fz14"/>
                      <span class="author-name">{{ blog.userName || '我是作者，我的名字超级超级超级超级超级超级超级长' }}</span>
                    </div>
                    <div class="b-c-other">
                      <svg-icon icon-class="label" class="fz14" style="color: rgb(248,168,168)" />
                      <span>{{ blog.label === 0 ? '原创' : blog.label === 1 ? '转载' : '翻译' }}</span>

                      <svg-icon icon-class="clock" class="ml10 fz14" style="color: rgb(135,212,237)" />
                      <span>{{ blog.issueTime }}</span>

                      <div class="b-c-o-right">

                        <svg-icon icon-class="like" class="fz14" />
                        点赞(<span style="color: #0e92b3">{{ blog.likeNum || 0 }}</span>)

                        <svg-icon icon-class="comment" class="ml7 fz14" />
                        评论(<span style="color: #0e92b3">{{ blog.commentNum || 0 }}</span>)

                        <svg-icon icon-class="view" class="ml7 fz14"/>
                        浏览(<span style="color: #0e92b3">{{ blog.viewNum || 0 }}</span>)
                      </div>
                    </div>

                    <div class="b-tag-list">
                    <span v-for="tag in blog.tagNames" class="b-t-item"
                          :class="tag === tagList[tagIndex].tagName ? 'active' : 'noActive' ">
                      {{ tag }}
                    </span>
                    </div>
                  </el-col>
                </el-row>
              </el-card>


              <el-empty v-if="blogList.length === 0" description="标签关联的博客列表为空" ></el-empty>

            </template>
          </el-skeleton>

        </div>

        <!-- 底部分页插件 -->
        <blog-paging v-show="blogList.length !== 0"
                     :data-load="dataLoad" :page-size="pageSize"
                     :page-index="pageIndex" :total-num="totalNum"
                     @page-change="pageChangeHandle" @current-change="currentChangeHandle" />
      </div>
    </el-col>
    <!-- 右侧侧 -->
    <el-col :span="5">
      <search-blog v-show="searchBlogVisible" ref="tagSearch"
                   :data-load="dataLoad || blogList.length === 0"
                   @search-blog="searchBlogHandle"
                   @clear-word="searchBlogHandle" @close-search="closeSearchBlogHandle"
                   :style="{ marginTop: searchMarginTop + 'px' }"/>
    </el-col>
  </el-row>
</template>

<script>
  import { colorList } from "assets/js/color";

  import SearchBlog from "@/components/blog/search";
  import BlogPaging from "@/components/blog/blog-paging";
  /*
    博客标签查看页
  */
  export default {
    components: { BlogPaging, SearchBlog },
    layout: 'default',
    name: "blog-tag-index",
    data() {
      return {
        // 所有标签列表
        tagList: [],
        // 当前系统所有标签数量
        tagSize: 0,
        // 被选中的标签下标
        tagIndex: 0,
        // 是否正在加载数据
        dataLoad: false,
        // 博客排序方式[0-最新 1-浏览最多 2-点赞最多]
        blogSortIndex: 0,
        // 博客检索框是否显示
        searchBlogVisible: false,
        // 搜索框按钮提示文字
        searchBlogTitle: '打开博客检索',
        // 检索框距离顶部距离
        searchMarginTop: 0,
        // 热门博客搜索表单
        searchFrom: {
          // 搜索文本
          word: '',
        },
        // 博客数组
        blogList: [],
        // 当前展示页码
        pageIndex: 1,
        // 当前页显示个数
        pageSize: 8,
        // 当前博客数量
        totalNum: 0,
      }
    },
    computed: {
      // 颜色列表
      colorList() {
        return colorList
      },
    },
    created() {
      if (process.client) {
        this.initTagSortDataHandle()
      }
    },
    methods: {
      /**
       * 初始化标签排序页面数据事件
       */
      initTagSortDataHandle() {
        // 获取封装路由传递参数的对象
        let params = this.$route.params
        if (!!params.tagIndex) {
          this.tagIndex = Number(params.tagIndex) || 0
        }
        let obj = {
          // 标签id
          tagId: params.tagId || '',
          // 是否搜索标签排序列表[有值-搜索 为空-不搜索]
          searchTag: 'search',
          sortType: this.blogSortIndex,
          page: this.pageIndex,
          limit: this.pageSize
        }
        // console.log(data);
        // 页面数据加载
        this.dataLoad = true
        this.$axios.$post('/index/tag/sort/data', obj)
          .then(({ data }) => {
            // 标签排行列表赋值
            this.tagList = data.tagSortList
            let blogPage = data.blogPage
            this.blogList = blogpage.list
            this.totalNum = blogPage.totalNum
          })
          .catch(() => {})
          .finally(() => {
            // 页面加载结束
            this.dataLoad = false
          })
      },
      /**
       * 标签切换事件
       * @param {number} tagIndex 选中的标签下标
       */
      tagChangeHandle(tagIndex) {
        if (this.tagIndex === tagIndex) {
          return
        }
        this.tagIndex = tagIndex
        this.pageIndex = 1

        this.getBlogList()
      },
      // 博客排序类型处理事件
      blogSortHandle(index) {
        if (this.dataLoad || this.blogList.length === 0 || this.blogSortIndex === index) {
          return
        }
        this.blogSortIndex = index

        this.getBlogList()
      },
      /**
       * 上下翻页操作事件
       * @param {boolean} bool 操作类型[true-下一页 false-上一页]
       */
      pageChangeHandle(bool) {
        if (bool) {
          this.pageIndex++
        } else {
          this.pageIndex--
        }

        this.getBlogList()
      },
      // 点击特定页码操作
      currentChangeHandle(index) {

        this.pageIndex = index

        this.getBlogList()
      },
      // 显示博客搜索框事件
      searchButtonClickHandle(e) {
        // 检索框距离顶部距离
        this.searchMarginTop = e.clientY - 91

        let ts = this.$refs.tagSearch
        if (this.searchBlogVisible) {
          this.searchFrom.word = ts.getSearchWord()
        } else {
          ts.init(this.searchFrom.word)
        }

        this.searchBlogVisible = !this.searchBlogVisible
        this.searchBlogTitle = this.searchBlogVisible ? '关闭搜索框' : '打开博客检索'
      },
      // 检索博客事件
      searchBlogHandle(word) {
        this.searchFrom.word = word
        // 页码恢复到第一页
        this.pageIndex = 1

        this.getBlogList()
      },
      // 关闭检索热门博客弹出框时间
      closeSearchBlogHandle(word) {
        this.searchFrom.word = word
        this.searchBlogVisible = false
        this.searchBlogTitle = '打开博客检索'
      },
      // 获取标签关联的博客列表
      getBlogList() {
        let obj = {
          tagId: this.tagList[this.tagIndex].tagId,
          word: this.searchFrom.word,
          sortType: this.blogSortIndex,
          page: this.pageIndex,
          limit: this.pageSize
        }
        // 页面数据加载
        this.dataLoad = true
        this.$axios.$post('/index/tag/sort/data', obj)
          .then(({ data }) => {
            let blogPage = data.blogPage
            this.blogList = blogpage.list
            this.totalNum = blogPage.totalNum
          })
          .catch(() => {})
          .finally(() => {
            // 页面加载结束
            this.dataLoad = false
          })
      },
      // 跳转至博客详细页面操作
      toBlogDetailHandle(blogId) {
        this.$router.push({ name: 'blog', params: { blogId} })
      },

    },
  }
</script>

<!--
  css字符对应
  c -> content
  l -> label
  t -> tag
-->
<style scoped>
  .tag-page {
    margin-top: 25px;
    margin-bottom: 20px;
    min-height: calc(100vh - 165px);
  }
</style>

<!-- 标签排行列表样式 -->
<style scoped>
  .tag-page .t-l-list {
    width: 100%;
    border-radius: 4px;
  }
  .t-l-list .t-l-item {
    margin: 5px 5px 5px 10px;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    transition: all .28s;
    position: relative;
  }
  .t-l-list .t-l-item.active,  .t-l-list .t-l-item:hover {
    border: 1px solid #f2711c;
    color: #f2711c;
  }
  .t-l-list .t-l-item.active:before, .t-l-list .t-l-item:hover:before {
    border: 1px solid #f2711c;
  }
  .t-l-list .t-l-item:before {
    border: 1px solid rgba(0, 0, 0, .5);
    border-left:transparent !important;
    border-bottom:transparent !important;
    content: '';
    position: absolute;
    top: 8px;
    left: -6px;
    width: 10px;
    height: 10px;
    transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    background-color: white;
  }
  .t-l-list .zero-tag {
    width: 100%;
    font-size: 14px;
    padding: 10px 0;
    color: #909399;
    text-align: center;
  }
</style>

<style scoped>
  .tag-page .t-c-list {
    margin-top: 15px;
  }
  .t-c-list .t-c-header {
    height: 35px;
    line-height: 35px;
    border-bottom: 3px solid #c4d7d6;
  }
  .t-c-header .t-c-h-left {
    float: left;
  }
  .t-c-h-left .title {
    margin-left: 5px;
    font-size: 17px;
    font-weight:bold;
  }
  .t-c-list .t-c-h-right {
    text-align: right;
  }
  .t-c-h-right .t-c-h-search-word {
    color: rgba(0, 0, 0, 0.5);
    margin-left: 5px;
    margin-right: 5px;
  }
  .t-c-h-right .t-c-h-search {
    margin-right: 15px;
  }
  .t-c-h-right .t-c-h-search .active {
    color: #0f95b0;
  }
  .t-c-h-right .sort-type {
    margin-right: 5px;
    cursor: pointer;
    user-select: none;
    transition: color .28s;
  }
  .t-c-h-right .sort-type.active {
    color: rgb(255, 51, 0);
  }
  .t-c-h-right .sort-type.load {
    cursor: not-allowed;
    color: #CCC;
  }
</style>

<!-- 博客展示列表样式 -->
<style scoped>
  .t-c-list .t-c-content {
    margin-top: 10px;
  }
  .t-c-content .blog {
    margin-top: 20px;
    cursor: pointer;
  }
  .blog .b-image {

  }
  .blog .b-image .image {
    width: 100%;
    height: 165px;
  }
  .blog .b-content {
    padding-left: 10px;
    font-size: 14px;
    top: 50%; /*偏移*/
    transform: translateY(10%);
  }
  .b-content .b-c-title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight:bold;
    display :inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .b-c-title .title {
    font-family: SimHei,serif;
    text-decoration: none;
    color: black;
    transition: color .28s;
  }
  .b-c-title .title:hover {
    color: #0f95b0;
  }
  .b-content .b-c-author, .b-content .b-c-other {
    margin-top: 10px;
  }
  .b-c-author .author-name {
    font-family: SimHei,serif;
  }
  .b-c-other .b-c-o-right {
    float: right;
  }
  .b-content .b-tag-list {
    font-size: 13px;
    line-height: 20px;
    margin-top: 10px;
  }
  .b-tag-list .b-t-item {
    padding: 3px 10px;
    margin-left: 15px;
    margin-top: 5px;
    border-radius: 5px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    user-select: none;
  }
  .b-tag-list .b-t-item:nth-child(1) {
    margin-left: 5px;
  }
  .b-t-item.active {
    border: 1px solid #00b5ad;
    color: #00b5ad;
    position: relative;
  }
  .b-t-item.active:before {
    border: 1px solid #00b5ad;
    border-left:transparent;
    border-bottom:transparent;
    content: '';
    position: absolute;
    top: 8px;
    left: -5px;
    width: 8px;
    height: 8px;
    transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    background-color: white;
  }
  .b-t-item.noActive {
    border: 1px solid rgba(0, 0, 0, .5);
    color: rgba(0, 0, 0, 0.5);
    position: relative;
  }
  .b-t-item.noActive:before {
    border: 1px solid rgba(0, 0, 0, .5);
    border-left:transparent;
    border-bottom:transparent;
    content: '';
    position: absolute;
    top: 8px;
    left: -5px;
    width: 8px;
    height: 8px;
    transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    background-color: white;
  }
</style>
